﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@

@{
    Layout = "~/Views/Shared/__ComponentLayout.cshtml";
    string editId = ViewData.Count >0 ? ViewData["0"].ToString() : "null";
    string randomId = Guid.NewGuid().ToString();

}
@using ST.Torch.WebApi.Web.Core;
@inherits UtilRazorPage<object>

<form style="padding: 16px;padding-right:30px"  class="layui-form" action=""  lay-filter="edit-data_@randomId">
     <input type="text" name="Id"  placeholder="" autocomplete="off" class="layui-input" style="display:none">
    
         <div class="layui-form-item">
              <label class="layui-form-label">@L("普通输入框-第一个string 做搜索条件")</label>
              <div class="layui-input-block">
                 <input type="text" name="InputStr" required  lay-verify="required"  autocomplete="off" class="layui-input">
              </div>
         </div>
         <div class="layui-form-item">
              <label class="layui-form-label">@L("图片--1")</label>
              <div class="layui-input-block">
                 
                <input type="text" style="display:none" id="User1ImgUrlInputEle_@randomId" name="User1ImgUrl" placeholder="" autocomplete="off" class="layui-input">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="User1ImgUrlButtonEle_@randomId">@L("上传图片")</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="User1ImgUrlEle_@randomId" style="height:50px;width:50px">
                        <p id="User1ImgUrlText_@randomId"></p>
                    </div>
                    <div style="width: 95px;" id="User1ImgUrlProgressEle_@randomId">
                        <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="User1ImgUrlProgress_@randomId">
                            <div class="layui-progress-bar" lay-percent=""></div>
                        </div>
                    </div>
                </div>
              </div>
         </div>
         <div class="layui-form-item">
              <label class="layui-form-label">@L("图片--")</label>
              <div class="layui-input-block">
                 
                <input type="text" style="display:none" id="User2ImgUrlInputEle_@randomId" name="User2ImgUrl" placeholder="" autocomplete="off" class="layui-input">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="User2ImgUrlButtonEle_@randomId">@L("上传图片")</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="User2ImgUrlEle_@randomId" style="height:50px;width:50px">
                        <p id="User2ImgUrlText_@randomId"></p>
                    </div>
                    <div style="width: 95px;" id="User2ImgUrlProgressEle_@randomId">
                        <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="User2ImgUrlProgress_@randomId">
                            <div class="layui-progress-bar" lay-percent=""></div>
                        </div>
                    </div>
                </div>
              </div>
         </div>
         <div class="layui-form-item">
              <label class="layui-form-label">@L("文件1")</label>
              <div class="layui-input-block">
                 
                <input type="text" style="display:none" id="User1FileUrlInputEle_@randomId" name="User1FileUrl" placeholder="" autocomplete="off" class="layui-input">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="User1FileUrlButtonEle_@randomId">@L("上传文件")</button>
                    <div class="layui-upload-list">
                        <p id="User1FileUrlText_@randomId"></p>
                    </div>
                    <div style="width: 95px;" id="User1FileUrlProgressEle_@randomId">
                        <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="User1FileUrlProgress_@randomId">
                             <div class="layui-progress-bar" lay-percent=""></div> 
                        </div>
                    </div>
                </div>
              </div>
         </div>
         <div class="layui-form-item">
              <label class="layui-form-label">@L("文件2")</label>
              <div class="layui-input-block">
                 
                <input type="text" style="display:none" id="User2FileUrlInputEle_@randomId" name="User2FileUrl" placeholder="" autocomplete="off" class="layui-input">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="User2FileUrlButtonEle_@randomId">@L("上传文件")</button>
                    <div class="layui-upload-list">
                        <p id="User2FileUrlText_@randomId"></p>
                    </div>
                    <div style="width: 95px;" id="User2FileUrlProgressEle_@randomId">
                        <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="User2FileUrlProgress_@randomId">
                             <div class="layui-progress-bar" lay-percent=""></div> 
                        </div>
                    </div>
                </div>
              </div>
         </div>
         <div class="layui-form-item">
              <label class="layui-form-label">@L("富文本框1")</label>
              <div class="layui-input-block">
                 <textarea id="Content1HtmlEle_@randomId" name="Content1Html"  class="layui-textarea"></textarea>
              </div>
         </div>
         <div class="layui-form-item">
              <label class="layui-form-label">@L("富文本框2")</label>
              <div class="layui-input-block">
                 <textarea id="Content2HtmlEle_@randomId" name="Content2Html"  class="layui-textarea"></textarea>
              </div>
         </div>
         <div class="layui-form-item">
              <label class="layui-form-label">@L("selec选择框-爱好")</label>
              <div class="layui-input-block">
                  <select name="SelectVal" lay-verify="required">
                                    <option value="0">写作</option>
                                    <option value="1">阅读</option>
                                    <option value="2">发呆</option></select>
              </div>
         </div>
         <div class="layui-form-item">
              <label class="layui-form-label">@L("selec选择框-状态")</label>
              <div class="layui-input-block">
                  <select name="StartType" lay-verify="required">
                                    <option value="0">进行中</option>
                                    <option value="3">过去</option>
                                    <option value="4">过去完成</option></select>
              </div>
         </div>
         <div class="layui-form-item">
              <label class="layui-form-label">@L("数字输入框1")</label>
              <div class="layui-input-block">
                 <input type="number" name="NumberVal1" required  lay-verify="required"  autocomplete="off" class="layui-input">
              </div>
         </div>
         <div class="layui-form-item">
              <label class="layui-form-label">@L("数字输入框2")</label>
              <div class="layui-input-block">
                 <input type="number" name="NumberVal2" required  lay-verify="required"  autocomplete="off" class="layui-input">
              </div>
         </div>
         <div class="layui-form-item">
              <label class="layui-form-label">@L("是否显示1")</label>
              <div class="layui-input-block">
                 <input type="checkbox" name="IsShow1" lay-skin="switch" value="true">
              </div>
         </div>
         <div class="layui-form-item">
              <label class="layui-form-label">@L("是否显示2")</label>
              <div class="layui-input-block">
                 <input type="checkbox" name="IsShow2" lay-skin="switch" value="true">
              </div>
         </div>
         <div class="layui-form-item">
              <label class="layui-form-label">@L("过期时间")</label>
              <div class="layui-input-block">
                 <input type="text" class="layui-input" name="XXTime" id="XXTimeEle">

              </div>
         </div>
 
  
    <div class="layui-form-item" style="text-align:right">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo_@randomId">@L("立即提交")</button>
            <button type="reset"  class="layui-btn layui-btn-primary addbut">@L("重置")</button>
            <button type="button" lay-filter="Close" class="layui-btn layui-btn-primary updatebut" >@L("关闭")</button>

        </div>
    </div>
</form>
 @section footer
{
<script>
    layui.use(['form', 'toast'   , 'upload', 'element','tinymce','laydate' ], function () {
        var form = layui.form;
        var toast = layui.toast;
        var upload = layui.upload;
        var element = layui.element;
        var tinymce = layui.tinymce;
        var laydate = layui.laydate;

        console.log("*--*");

        var editId = '@editId';
        var IsUpdate = editId != "null" ? true : false;

        form.render(); // 初始化form

        var Content1HtmlTinymceEle=null;
        var Content2HtmlTinymceEle=null;
  
                            //执行一个laydate实例
        laydate.render({
               elem: '#XXTimeEle', //指定元素
               type: 'datetime',
               format: 'yyyy-MM-dd HH:mm:ss'
               //type: 'time', // 选择时间类型
               //format: 'HH:mm:ss'   //控制文本显示的内容格式
         });

        $(".addbut").hide();
        $(".updatebut").hide();
        if (IsUpdate) {
            $(".updatebut").show();
            Query();
        } else {
            $(".addbut").show();
            
            Content1HtmlTinymceEle=initTinymce('Content1HtmlEle_@randomId',"");
            Content2HtmlTinymceEle=initTinymce('Content2HtmlEle_@randomId',"");

        }
        //监听按钮
        $(".layui-form button").click(function () {
            var id = $(this).attr('lay-filter');
            //alert(id);
            switch (id) {
                    case "Close": closeOpen(); break;
            }
        });
        var buttonEle = null;
        form.on('submit(formDemo_@randomId)', function (data) {
            console.log(data.field)
            buttonEle = button.load({ elem: this });
            data.field['Content1Html']= Content1HtmlTinymceEle.getContent();
            data.field['Content2Html']= Content2HtmlTinymceEle.getContent();

            //layer.msg(JSON.stringify(data.field));
            if (IsUpdate) {

                Update(data);
            } else {
                Add(data);
            }

            return false;
        });

        function Query() {
            console.log("--Query--")
            var formData = {
                Id: editId
            };
            $.ajax({
                type: 'POST',
                url: '/api/AutomaticCodeGeneration/Single',//发送请求
                data: formData,
                success: function (result) {
                    //console.log(result)
                    if (result.Succeeded) {
                        form.val("edit-data_@randomId", result.Data);

                        $('#User1ImgUrlEle_@randomId').attr('src', FileHttpApiUrl+result.Data.User1ImgUrl); //图片链接（base64）
                        $('#User1ImgUrlProgressEle_@randomId').hide();
                        $('#User2ImgUrlEle_@randomId').attr('src', FileHttpApiUrl+result.Data.User2ImgUrl); //图片链接（base64）
                        $('#User2ImgUrlProgressEle_@randomId').hide();
                        $('#User1FileUrlText_@randomId').html('<span>'+result.Data.User1FileUrl+'<span>'); //
                        $('#User1FileUrlProgressEle_@randomId').hide();
            
                        $('#User2FileUrlText_@randomId').html('<span>'+result.Data.User2FileUrl+'<span>'); //
                        $('#User2FileUrlProgressEle_@randomId').hide();
            
                        Content1HtmlTinymceEle=initTinymce('Content1HtmlEle_@randomId',"");
                        Content2HtmlTinymceEle=initTinymce('Content2HtmlEle_@randomId',"");

                    } else {
                        toast.error({
                            message: '@L("查询失败")',
                        });
                    }
                }
            });

        }

        function Add(data) {
            $.ajax({
                type: 'POST',
                url: '/api/AutomaticCodeGeneration/Insert',//发送请求
                data: data.field,
                success: function (result) {
                    buttonEle.stop();
                    //console.log(result)
                    if (result.Succeeded) {
                        parent.layer.close(G_LayuiOpenTypeIndex);
                        toast.success({
                            message: '@L("添加成功")',
                        });
                    } else {
                        var msgError = '@L("添加失败")';
                        if (result.Errors != "") {
                            msgError = result.Errors
                        }
                        toast.error({
                            message: msgError,
                        });
                    }
                }, error: function (err) {
                    buttonEle.stop();
                }
            });

        }
        function Update(data) {
            $.ajax({
                type: 'POST',
                url: '/api/AutomaticCodeGeneration/Update',//发送请求
                data: data.field,
                success: function (result) {
                    //console.log(result)
                    buttonEle.stop();

                    if (result.Succeeded) {
                        closeOpen();
                        toast.success({
                            message: '@L("修改成功")',
                        });
                    } else {
                        var msgError = '@L("修改失败")';
                        if (result.Errors != "") {
                            msgError = result.Errors
                        }
                        toast.error({
                            message: msgError,
                        });
                    }
                }, error: function (err) {
                    buttonEle.stop();
                }
            });

        }
       
        function closeOpen() {
  
            parent.layer.close(G_LayuiOpenTypeIndex);
            return true;
        }

        
//=================================上传图片Start
                //常规使用 - 普通图片上传
                var uploadUser1ImgUrl = upload.render({
                    elem: '#User1ImgUrlButtonEle_@randomId'
                   // , url: '/Api/System/Uploadfiles/UserImg' //上传接口
                   , url: 'api/File/UploadFile' //上传接口
                  ,data:{
                              DirectoryName:'AutomaticCodeGeneration'
                  }
                , accept: 'images' //只允许上传图片
                , acceptMime: 'image/*' //只筛选图片
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                            $('#User1ImgUrlEle_@randomId').attr('src', result); //图片链接（base64）
                    });
                        $('#User1ImgUrlProgressEle_@randomId').show();
                        element.progress('User1ImgUrlProgress_@randomId', '0%'); //进度条复位
                    layer.msg('@L("上传中")', { icon: 16, time: 0 });
                }
                , done: function (res) {
                    //如果上传失败
                    // if (res.code > 0) {
                    //     return layer.msg('上传失败');
                    // }
                    if (res.code == 200) {
                            $("#User1ImgUrlInputEle_@randomId").val(res.data)
                    } else {
                        layer.msg(res.msg);

                    }
                    //上传成功的一些操作
                    //……
                          $('#User1ImgUrlText_@randomId').html('<span style="color: green;">@L("上传成功")</span>'); //置空上传失败的状态
                       $('#User1ImgUrlProgressEle_@randomId').hide();

                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#ImgText_@randomId');
                    demoText.html('<span style="color: #FF5722;">@L("上传失败")</span> <a class="layui-btn layui-btn-xs demo-reload">@L("重试")</a>');
                    demoText.find('.demo-reload').on('click', function () {
                            uploadUser1ImgUrl.upload();
                    });
                }
                //进度条
                , progress: function (n, elem, e) {
                      element.progress('User1ImgUrlProgress_@randomId', n + '%'); //可配合 layui 进度条元素使用
                    if (n == 100) {
                        layer.msg('@L("上传完毕")', { icon: 1 });
                    }
                }
            });
//=================================上传图片Start
                //常规使用 - 普通图片上传
                var uploadUser2ImgUrl = upload.render({
                    elem: '#User2ImgUrlButtonEle_@randomId'
                   // , url: '/Api/System/Uploadfiles/UserImg' //上传接口
                   , url: 'api/File/UploadFile' //上传接口
                  ,data:{
                              DirectoryName:'AutomaticCodeGeneration'
                  }
                , accept: 'images' //只允许上传图片
                , acceptMime: 'image/*' //只筛选图片
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                            $('#User2ImgUrlEle_@randomId').attr('src', result); //图片链接（base64）
                    });
                        $('#User2ImgUrlProgressEle_@randomId').show();
                        element.progress('User2ImgUrlProgress_@randomId', '0%'); //进度条复位
                    layer.msg('@L("上传中")', { icon: 16, time: 0 });
                }
                , done: function (res) {
                    //如果上传失败
                    // if (res.code > 0) {
                    //     return layer.msg('上传失败');
                    // }
                    if (res.code == 200) {
                            $("#User2ImgUrlInputEle_@randomId").val(res.data)
                    } else {
                        layer.msg(res.msg);

                    }
                    //上传成功的一些操作
                    //……
                          $('#User2ImgUrlText_@randomId').html('<span style="color: green;">@L("上传成功")</span>'); //置空上传失败的状态
                       $('#User2ImgUrlProgressEle_@randomId').hide();

                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#ImgText_@randomId');
                    demoText.html('<span style="color: #FF5722;">@L("上传失败")</span> <a class="layui-btn layui-btn-xs demo-reload">@L("重试")</a>');
                    demoText.find('.demo-reload').on('click', function () {
                            uploadUser2ImgUrl.upload();
                    });
                }
                //进度条
                , progress: function (n, elem, e) {
                      element.progress('User2ImgUrlProgress_@randomId', n + '%'); //可配合 layui 进度条元素使用
                    if (n == 100) {
                        layer.msg('@L("上传完毕")', { icon: 1 });
                    }
                }
            });
//=================================上传文件Start
                         //常规使用 - 普通文件上传
                        var uploadUser1FileUrl = upload.render({
                        elem: '#User1FileUrlButtonEle_@randomId'
                       // , url: '/Api/System/Uploadfiles/UserImg' //上传接口
                       , url: 'api/File/UploadFile' //上传接口
                      ,data:{
                                  DirectoryName:'AutomaticCodeGeneration'
                      }
                       , accept: 'file' 
                    //, acceptMime: 'image/*' //只筛选图片
                    , before: function (obj) {
                        //预读本地文件示例，不支持ie8
                        obj.preview(function (index, file, result) {
                                $('#User1FileUrlEle_@randomId').attr('src', result); //图片链接（base64）
                        });
                            $('#User1FileUrlProgressEle_@randomId').show();
                            element.progress('User1FileUrlProgress_@randomId', '0%'); //进度条复位
                        layer.msg('@L("上传中")', { icon: 16, time: 0 });
                    }
                    , done: function (res) {
                        //如果上传失败
                        // if (res.code > 0) {
                        //     return layer.msg('上传失败');
                        // }
                        if (res.code == 200) {
                                $("#User1FileUrlInputEle_@randomId").val(res.data)
                        } else {
                            layer.msg(res.msg);

                        }
                        //上传成功的一些操作
                        //……
                         $('#User1FileUrlText_@randomId').html('<span style="color: green;">@L("上传成功")</span><span>'+res.data+'<span>'); //置空上传失败的状态
                         $('#User1FileUrlProgressEle_@randomId').hide();

                    }
                    , error: function () {
                        //演示失败状态，并实现重传
                        var demoText = $('#ImgText_@randomId');
                        demoText.html('<span style="color: #FF5722;">@L("上传失败")</span> <a class="layui-btn layui-btn-xs demo-reload">@L("重试")</a>');
                        demoText.find('.demo-reload').on('click', function () {
                                    uploadUser1FileUrl.upload();
                        });
                    }
                    //进度条
                    , progress: function (n, elem, e) {
                          element.progress('User1FileUrlProgress_@randomId', n + '%'); //可配合 layui 进度条元素使用
                        if (n == 100) {
                            layer.msg('@L("上传完毕")', { icon: 1 });
                        }
                    }
                });
                //=============================End
//=================================上传文件Start
                         //常规使用 - 普通文件上传
                        var uploadUser2FileUrl = upload.render({
                        elem: '#User2FileUrlButtonEle_@randomId'
                       // , url: '/Api/System/Uploadfiles/UserImg' //上传接口
                       , url: 'api/File/UploadFile' //上传接口
                      ,data:{
                                  DirectoryName:'AutomaticCodeGeneration'
                      }
                       , accept: 'file' 
                    //, acceptMime: 'image/*' //只筛选图片
                    , before: function (obj) {
                        //预读本地文件示例，不支持ie8
                        obj.preview(function (index, file, result) {
                                $('#User2FileUrlEle_@randomId').attr('src', result); //图片链接（base64）
                        });
                            $('#User2FileUrlProgressEle_@randomId').show();
                            element.progress('User2FileUrlProgress_@randomId', '0%'); //进度条复位
                        layer.msg('@L("上传中")', { icon: 16, time: 0 });
                    }
                    , done: function (res) {
                        //如果上传失败
                        // if (res.code > 0) {
                        //     return layer.msg('上传失败');
                        // }
                        if (res.code == 200) {
                                $("#User2FileUrlInputEle_@randomId").val(res.data)
                        } else {
                            layer.msg(res.msg);

                        }
                        //上传成功的一些操作
                        //……
                         $('#User2FileUrlText_@randomId').html('<span style="color: green;">@L("上传成功")</span><span>'+res.data+'<span>'); //置空上传失败的状态
                         $('#User2FileUrlProgressEle_@randomId').hide();

                    }
                    , error: function () {
                        //演示失败状态，并实现重传
                        var demoText = $('#ImgText_@randomId');
                        demoText.html('<span style="color: #FF5722;">@L("上传失败")</span> <a class="layui-btn layui-btn-xs demo-reload">@L("重试")</a>');
                        demoText.find('.demo-reload').on('click', function () {
                                    uploadUser2FileUrl.upload();
                        });
                    }
                    //进度条
                    , progress: function (n, elem, e) {
                          element.progress('User2FileUrlProgress_@randomId', n + '%'); //可配合 layui 进度条元素使用
                        if (n == 100) {
                            layer.msg('@L("上传完毕")', { icon: 1 });
                        }
                    }
                });
                //=============================End
//===========================================富文本框
              var OssUrl="/api/File/UploadFile"
              function initTinymce(id, contectStr) {
                       var TinymceEle = tinymce.render({
                        elem: "#" + id
                        , height: 500
                        , width: '100%'
                        , content: contectStr // 设置初始值
                        , images_upload_handler: function (blobInfo, succFun, failFun) {
                            var xhr, formData;
                            var file = blobInfo.blob();//转化为易于理解的file对象
                            xhr = new XMLHttpRequest();
                            xhr.withCredentials = false;
                            xhr.open('POST', OssUrl);
                            xhr.onload = function () {
                                var json;
                                if (xhr.status != 200) {
                                    failFun('HTTP Error: ' + xhr.status);
                                    return;
                                }
                                json = JSON.parse(xhr.responseText);
                                if (json.code != 200) {
                                    failFun('Invalid JSON: ' + xhr.responseText);
                                    return;
                                }
                    
                                succFun(FileHttpApiUrl+ json.data);
                            };
                            formData = new FormData();
                            formData.append('file', file, file.name);//此处与源文档不一样
                            formData.append('DirectoryName','TinymceImg' );//此处与源文档不一样
                            xhr.send(formData);
                        }
                        , init_instance_callback: function (editor) {
                            autoImportImage(editor, 'TinymceImg');
                        }
                    });
                        return TinymceEle;
                }
            //===================富文本框End
        

    });
</script>
}